﻿
@{
    ViewBag.Title = "ResetPassword";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section head {
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="~/Content/css/bootstrap.min.css">
    <link rel="stylesheet" href="~/Content/css/animate.css">
    <link rel="stylesheet" href="~/Content/css/signstyle.css">

    <!-- Modernizr JS -->
    <script src="~/Content/js/modernizr-2.6.2.min.js"></script>
    <!-- FOR IE9 below -->
    <!--[if lt IE 9]>
    <script src="~/Content/js/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="http://pv.sohu.com/cityjson?ie=utf-8" charset="utf-8"></script>
}

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <!-- Start Reset Password div -->
            <div class="fh5co-form animate-box" data-animate-effect="fadeIn">
                <h2>Reset Password</h2>
                <div class="form-group">
                    <label for="username" class="sr-only">Username</label>
                    <input type="text" class="form-control" id="username" placeholder="Username" maxlength="20" autocomplete="off">
                </div>
                <div class="form-group">
                    <label for="password" class="sr-only">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="Password" maxlength="16" autocomplete="off">
                </div>
                <div class="form-group">
                    <label for="repassword" class="sr-only">RePassword</label>
                    <input type="password" class="form-control" id="repassword" placeholder="RePassword" maxlength="16" autocomplete="off">
                </div>
                <div class="form-group">
                    <p><a href="index.html">Sign In</a> or <a href="sign-up.html">Sign Up</a></p>
                </div>
                <div id="msg" class="form-group">
                    <div class="alert alert-success" role="alert"></div>
                </div>
                <div class="form-group">
                    <input id="btnReset" type="submit" value="Reset Password" class="btn btn-primary">
                </div>
                <input type="hidden" value="@ViewBag.UserId" id="userId" />
                <input type="hidden" value="@ViewBag.Code" id="code" />
            </div>
            <!-- END Reset Password div -->
        </div>
    </div>
</div>
<!-- Bootstrap -->
<script src="~/Content/js/bootstrap.min.js"></script>
<!-- Placeholder -->
<script src="~/Content/js/jquery.placeholder.min.js"></script>
<!-- Waypoints -->
<script src="~/Content/js/jquery.waypoints.min.js"></script>
<!-- Main JS -->
<script src="~/Content/js/main.js"></script>

<script>
    $(function () {
        $("#msg").hide();
        $("#btnReset").attr('disabled', 'true');
        $("#repassword").blur(function () {
            var password = $("#password").val();
            var repassword = $("#repassword").val();
            if (password != repassword) {
                $("#msg").show().find('div').html("The password entered twice is inconsistent");
            }
            else {
                $("#btnReset").removeAttr("disabled");
                $("#msg").hide();
            }
        });
    });
    $("#btnReset").click(function () {
        var name = $("#username").val();
        var password = $("#password").val();
        var repassword = $("#repassword").val();
        if (name.length == 0 || password.length == 0 || repassword.length == 0) {
            $("#msg").show().find('div').html("Username or password can't be empty!");
            return;
        }
        if (password != repassword) {
            $("#msg").show().find('div').html("The password entered twice is inconsistent");
            return;
        }
        var code = $("#code").val();
        var userId = $("#userId").val();
        $("#btnReset").attr('disabled', 'true');
        $("#btnReset").val("Loading...");
        $.ajax({
            url: "/User/ResetPassword", dataType: "json",
            type: "post", data: { userId: userId, userName: name, pwd: password, verifyCode: code },
            success: function (res) {
                if (res.Status == "OK") {
                    location.href = "/User/Login";
                } else {
                    $("#msg").show().find('div').html(res.ErrorMsg);
                    $("#btnReset").find('span').html("Reset Password");
                    $("#btnReset").removeAttr("disabled");
                }
            }, error: function () {
                $("#msg").show().find('div').html("Network error");
                $("#btnReset").find('span').html("Reset Password");
                $("#btnReset").removeAttr("disabled");
            }
        });


    });
</script>
